<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <link href='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
      html,
      body,
      #map {
          width: 100%;
          height: 100%;
          margin: 0;
          padding: 0;
          overflow: hidden;
      }
      /*.box {
          width: 0;
          height: 0;
          border: 10px solid transparent;
          border-top-color: red;
          border-bottom-color: blue;
          border-right-color: deeppink;
          border-left-color: olivedrab;
      }*/
      .red-point {
          background-color: red;
          opacity: 0.6;
          width: 10px;
          height: 10px;
          border-radius: 100%;
          cursor: pointer;
      }

      .my-popup {
          padding: 0 5px;
          border-radius: 4px;
          white-space: nowrap;
          font-size: 12px;
          opacity: 0.6;
      }
      .mapboxgl-popup-content {
          padding: 0;
      }
      .my-popup h5 {
          margin: 0;
          padding: 3px 5px;
          font-size: 14px;
      }
      .my-popup h5 .close {
          float: right;
          margin: 2px;
          font-size: 16px;
          cursor: pointer;
      }
      .my-popup .chart {
          width: 200px;
          height: 120px;
      }
  </style>
</head>
<body>
<div id="map">
</div>
<script src='https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js'></script>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js"></script>
<script>
    const style = {
        "version": 8,
        "name": "lzugis", // dark, light, pink
        "sources": {
            "nav": {
                "type": "raster",
                "tiles": ['https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'],
                "tileSize": 256
            }
        },
        "layers": [{
            "id": "nav",
            "type": "raster",
            "source": "nav",
            "minzoom": 0,
            "maxzoom": 17
        }]
    }
    const dom = document.getElementById('map');
    window.map = new mapboxgl.Map({
        container: dom,
        style: style,
        center: [103.081163, 37.1612],
        zoom: 3.5,
        minZoom: 2,
        maxZoom: 18
    });

    let data = []
    let popup

    map.on('load', function () {
        popup = new mapboxgl.Popup({
            closeButton: false,
            closeOnClick: false,
            className: 'my-popup',
            offset: [0, -8],
            anchor: 'bottom'
        });

        $.get('data/point.geojson', res => {
            data = res.features
            data.forEach((item, index) => {
                const coords = item.geometry.coordinates
                const div = document.createElement('div')
                div.setAttribute('class', 'red-point')
                div.setAttribute('index', index)
                new mapboxgl.Marker({
                    element: div
                }).setLngLat(coords).addTo(map);

                div.onclick = function (e) {
                    const idx = this.getAttribute('index')
                    showPointInfo(idx)
                }
            })
        })
    })

    function showPointInfo(idx) {
        const d = data[idx]
        console.log(d)
        const content = `
          <h5>
            ${d.properties.name}
            <span class="close" id="popupClose">×</span>
          </h5>
          <div id="chart" class="chart"></div>
        `;
        popup.setLngLat(d.geometry.coordinates)
            .setHTML(content)
            .addTo(map);

        document.getElementById('popupClose').onclick = function () {
            popup.remove()
        }

        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(document.getElementById('chart'));

        // 指定图表的配置项和数据
        let option = {
            tooltip: {},
            legend: {
                data:['销量'],
                show: false
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            grid: {
                top: 10,
                bottom: 20,
                left:30,
                right: 10
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);

    }
</script>
</body>
</html>